<template>
  <div class="wrapper">
    <div id="map_container"></div>
  </div>
</template>

<script>
import BMapGL from "BMapGL";
var mapv = require("mapv");
var mapvgl = require("mapvgl");

export default {
  name: "line2",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      var map = new BMapGL.Map("map_container");

      var point = new BMapGL.Point(105.552849, 28.847593);
      map.centerAndZoom(point, 5);
      map.setHeading(0);
      map.setTilt(41.8);

      var citys = [
        "北京",
        "天津",
        "上海",
        "重庆",
        "石家庄",
        "太原",
        "呼和浩特",
        "哈尔滨",
        "长春",
        "沈阳",
        "济南",
        "南京",
        "合肥",
        "杭州",
        "南昌",
        "福州",
        "郑州",
        "武汉",
        "长沙",
        "广州",
        "南宁",
        "西安",
        "银川",
        "兰州",
        "西宁",
        "乌鲁木齐",
        "成都",
        "贵阳",
        "昆明",
        "拉萨",
        "海口"
      ];

      var randomCount = 350; // 模拟的飞线的数量

      var curve = new mapvgl.BezierCurve();

      var data = [];

      // 构造数据
      while (randomCount--) {
        var startPoint = mapv.utilCityCenter.getCenterByCityName(
          citys[parseInt(Math.random() * citys.length, 10)]
        );
        var endPoint = mapv.utilCityCenter.getCenterByCityName(
          citys[parseInt(Math.random() * citys.length, 10)]
        );
        
        startPoint = map.lnglatToMercator(startPoint.lng, startPoint.lat);
        endPoint = map.lnglatToMercator(endPoint.lng, endPoint.lat);

        curve.setOptions({
          start: [startPoint[0], startPoint[1]],
          end: [endPoint[0], endPoint[1]]
        });
        var curveModelData = curve.getPoints(60);

        data.push({
          geometry: {
            type: "LineString",
            coordinates: curveModelData
          },
          properties: {
            count: Math.random()
          }
        });
      }

      var view = new mapvgl.View({
        // postProcessing: new mapvgl.PostProcessing({
        //     passes: [{
        //         name: 'unrealBloom',
        //         threshold: 0.0,
        //         strength: 1.5,
        //         radius: 1.0
        //     }]
        // }),
        effects: [
          new mapvgl.BrightEffect({
            threshold: 0,
            blurSize: 2,
            clarity: 0.4
          })
        ],
        map: map
      });

      var lineLayer = new mapvgl.LineTripLayer({
        color: "rgb(255, 255, 204)", // 飞线动画颜色
        step: 0.3
      });
      view.addLayer(lineLayer);

      lineLayer.setData(
        data.map(item => {
          item.geometry.coordinates = item.geometry.coordinates.map(item => {
            item[2] += 3;
            return item;
          });
          return item;
        })
      );

      lineLayer = new mapvgl.SimpleLineLayer({
        blend: "lighter",
        color: "rgb(255, 153, 0, 0.6)" // 飞线颜色
      });
      view.addLayer(lineLayer);
      lineLayer.setData(data);
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
}
#map_container {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>
